import {observer} from 'mobx-react-lite';
import {Path, Svg} from 'react-native-svg';
import {useGlobalStore} from '../../mobx';
import {getColorStr} from '../../themes';
import {IconProps} from './types';

export const SvgAdd = observer((props: IconProps) => {
  const {colorKey = 'color_2', ...rest} = props;
  const {theme} = useGlobalStore();
  return (
    <Svg width="12" height="12" viewBox="0 0 12 12" fill="none" {...rest}>
      <Path
        d="M11.0119 6.86938H1.48418C1.18051 6.86938 0.914795 6.60367 0.914795 6.3C0.914795 5.99632 1.18051 5.73061 1.48418 5.73061H11.0119C11.3156 5.73061 11.5813 5.99632 11.5813 6.3C11.5813 6.60367 11.3156 6.86938 11.0119 6.86938Z"
        fill={getColorStr(theme, colorKey)}
        stroke={getColorStr(theme, colorKey)}
        strokeWidth="0.5"
      />
      <Path
        d="M6.22906 11.6523C5.92538 11.6523 5.65967 11.3865 5.65967 11.0829V1.51713C5.65967 1.21345 5.92538 0.947739 6.22906 0.947739C6.53273 0.947739 6.79845 1.21345 6.79845 1.51713V11.0449C6.79845 11.3865 6.53273 11.6523 6.22906 11.6523Z"
        fill={getColorStr(theme, colorKey)}
        stroke={getColorStr(theme, colorKey)}
        strokeWidth="0.5"
      />
    </Svg>
  );
});
